<template>
  <div class="login">
    <!--    <img class="logo" src="@/assets/logo2.png" alt="">-->
    <div class="title">欢迎登录,</div>
    <div class="title">镇海区"项目码上智办"</div>
    <div class="tabs f-r j-c a-c">
      <!--      <div :class="['tab', activeName === 'code' ? 'active' : '']" @click="activeName = 'code'">浙政钉扫码登陆</div>-->
      <div :class="['tab', activeName === 'password' ? 'active' : '']" @click="activeName = 'password'">账号登录</div>
    </div>

    <div v-show="activeName === 'code'" class="form-code" />
    <div v-show="activeName === 'password'" class="form-password">
      <van-cell-group>
        <van-field v-model="form.username" label="" placeholder="请输入账号" />
        <van-field v-model="form.password" type="password" label="" placeholder="请输入密码" />
      </van-cell-group>
      <div class="login-btn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      activeName: 'password',
      form: {
        username: '',
        password: ''
      }
    }
  },
  created() {
    // this.ticketpop()
  },
  methods: {
    async ticketpop() {
      // if (ZWJSBridge.ssoTicket) {
      //   const ssoFlag = await ZWJSBridge.ssoTicket({})
      //   console.log(ssoFlag)
      //   // this.$alert(ssoFlag.ticketId, 'ticketid', {
      //   //   confirmButtonText: '确定',
      //   //   callback: action => {
      //   //     this.$message({
      //   //       type: 'info',
      //   //       message: `action: ${action}`
      //   //     })
      //   //   }
      //   // })
      //   if (ssoFlag && ssoFlag.result === true) {
      //     // 使用 IRS“浙里办”统一单点登录组件
      //     if (ssoFlag.ticketId) {
      //       // TODO 应用方服务端单点登录接口
      //     }
      //   } else {
      //     // 异常情况：当前环境不支持 “浙里办”统一单点登录
      //   }
      // } else {
      //   // 异常情况：ZWJSBridge 加载异常
      // }
    },
    // 登录: 先检查数据, 然后执行登录操作
    async login() {
      await this.$store.dispatch('user/login', {
        username: this.form.username,
        password: this.form.password
      })
      // console.log(ZWJSBridge.ssoTicket);

      this.$router.push({ path: '/home',
        query: {
          vconsole: true
        }})
    }
  }
}
</script>

<style lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #BAD1FF, #FFFFFF);
    padding-top: 43px;
    .login-btn {
        margin-top: 100px;
        height: 44px;
        background: #7AA7FF;
        border-radius: 22px;
        line-height: 44px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
    }
    .van-cell-group,
    .van-cell {
        background-color: transparent;
    }
    .van-cell {
        border-bottom: 1px solid #BBBABA;
        margin-bottom: 10px;
        padding-left: 0;
    }
    .form-code,
    .form-password{
        margin: 0 50px;
    }
    .tabs {
        margin: 57px 50px;
        .tab {
            height: 16px;
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            position: relative;
        }
        .tab.active::after {
            position: absolute;
            display: inline-block;
            content: ' ';
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background: #256FEB;
            bottom: -11px;
            left: 0;
        }
    }
    .logo {
        width: 108px;
        height: 108px;
        margin: 0 auto 10px;
        text-align: center;
        display: block;
    }
    .title {
        margin: 0 auto;
        width: 228px;
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #256FEB;
        line-height: 32px;
        text-align: center;
    }
}
</style>

